<template>
  <div id="components-form-demo-advanced-search">
    <a-spin :spinning="loading">
      <a-form-model class="ant-advanced-search-form" :model="form">
        <a-divider orientation="left"><span class="text-bold">账号密码设置</span></a-divider>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="密码强度要求设置" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-radio-group @change="passwordLevelChange" :default-value="1">
                <a-radio :value="1">
                  低
                </a-radio>
                <a-radio :value="2">
                  中
                </a-radio>
                <a-radio :value="3">
                  高
                </a-radio>
              </a-radio-group>
              <div style="color: red">{{passwordLevelText}}</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="密码过期" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-switch default-checked v-model="form.passwordOverdue"/>
              <div v-if="form.passwordOverdue">
                <a-input-number :min="1" :default-value="100" style="width: 80px !important"></a-input-number>
                <span class="margin-left-xs margin-right-sm">天后过期(过期后强制修改)</span>
              </div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="初始密码强制修改" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-switch default-checked/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="初始密码" :label-col="labelCol" :wrapper-col="wrapperCol">
              <!--<a-input style="width: 180px !important"/>-->
              <a-input-password style="width: 180px !important" v-model="form.password"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-divider orientation="left"><span class="text-bold">登录设置</span></a-divider>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="单次登录有效时间:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <span class="margin-right-xs">用户无操作</span>
              <a-input-number :min="1" style="width: 80px !important" :default-value="100"></a-input-number>
              <span class="margin-left-xs">分钟后退出系统</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="账户锁定策略设置:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-switch default-checked v-model="form.accountLockRules"></a-switch>
              <div v-show="form.accountLockRules">
                <span class="margin-right-xs">连续登录失败</span>
                <a-input-number :min="1" :default-value="10" style="width: 80px !important"></a-input-number>
                <span class="margin-left-xs margin-right-sm">次</span>
                <a-radio-group :default-value="1">
                  <a-radio :value="1">
                    账号锁定
                  </a-radio>
                  <a-radio :value="2">
                    延时
                    <a-input-number :min="1" :default-value="10" style="width: 80px !important"></a-input-number>
                    分钟登录
                  </a-radio>
                </a-radio-group>
              </div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="登录方式:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-switch default-checked v-model="form.loginWay"></a-switch>
              <div v-if="form.loginWay">
                <a-radio-group :default-value="1">
                  <a-radio :value="1">
                    后登录踢出先登录
                  </a-radio>
                  <a-radio :value="2">
                    已登录禁止再登录
                  </a-radio>
                </a-radio-group>
              </div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="登录验证码:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-switch default-checked></a-switch>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="上次登录信息提示:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-switch default-checked></a-switch>
              <div>示例：</div>
              <a-alert type="success">
                <div slot="description">
                  ​ IP地址：117.29.109.38<br/>
                  ​ 时间：2021-05-28 14:17:11<br/>
                  ​ 地点：长沙
                </div>
              </a-alert>
              <!--<div>示例：</div>-->
              <!--<div>IP地址：117.29.109.38</div>-->
              <!--<div>时间：2021-05-28 14:17:11</div>-->
              <!--<div>地点：长沙</div>-->
              <!--<div>开启后将在登录时通过消息中心发送给用户</div>-->
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="自动锁屏:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-switch default-checked v-model="form.autoLock"></a-switch>
              <div v-show="form.autoLock">
                <span class="margin-right-xs">用户无操作</span>
                <a-input-number :min="1" :default-value="80" style="width: 80px !important"></a-input-number>
                <span class="margin-left-xs">分钟后自动锁屏</span>
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-divider orientation="left"><span class="text-bold">白名单设置</span></a-divider>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="成员登录IP过滤:" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-switch default-checked v-model="form.IPFilter"></a-switch>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="IP地址列表：" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="form.IPFilter">
              <a-textarea placeholder="多个IP地址，用英文逗号分开" :auto-size="{ minRows: 3, maxRows: 5 }"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </div>
</template>
<script>
  import pick from "lodash.pick";
  import AFormItem from "ant-design-vue/es/form/FormItem";
  // 表单字段
  const fields = [];

  export default {
    components: {
      AFormItem,
    },
    data() {
      return {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          }
        },
        // form: this.$form.createForm(this),
        model: {},
        loading: false,
        radioStyle: {
          display: 'block',
          height: '30px',
          lineHeight: '30px',
        },
        passwordLevelText: '密码由不少于6位数字、大小写字母组成!',
        form: {
          accountLockRules: true,
          autoLock: true,
          IPFilter: true,
          password: '000000',
          passwordOverdue:true,
          loginWay:true
        }
      }
    },
    created() {
      // fields.forEach((v) => this.form.getFieldDecorator(v));
      // this.$post("/system/config/selectAll", {}).then(res => {
      //   res.forEach(item => {
      //     this.$set(this.model,item.code,item.value)
      //   })
      //   this.form.setFieldsValue(pick(this.model, fields))
      // })
    },
    methods: {
      save() {
        // this.form.validateFields((err, values) => {
        //   if (!err) {
        //     // this.loading = true
        //     // let param = []
        //     // for(let key in values){
        //     //   param.push({
        //     //     code: key,
        //     //     value: values[key]
        //     //   })
        //     // }
        //     // this.$post(
        //     //   "/system/config/save",
        //     //   {
        //     //     param: JSON.stringify(param)
        //     //   }
        //     // ).then(res => {
        //     //   this.$message.success(res.message);
        //     //   this.loading = false
        //     // })
        //   } else {
        //     this.$message.warning("请将信息填写完整！");
        //   }
        // });
      },
      //密码等级改变事件
      passwordLevelChange(e) {
        if (e.target.value == 1) {
          this.passwordLevelText = '密码由不少于6位数字、大小写字母组成!'
        } else if (e.target.value == 2) {
          this.passwordLevelText = '密码由不少于7位数字、大小写字母和符号组成'
        } else if (e.target.value == 3) {
          this.passwordLevelText = '密码由不少于8位数字、大小写字母和特殊符号组成!'
        }
      },
      //账号锁定改变
      accountLockRulesChange(value, e) {
        if (value) {
          this.passwordLevelText = '密码由不少于6位数字、大小写字母组成!'
        } else {
          this.passwordLevelText = '密码由不少于7位数字、大小写字母和符号组成'
        }
      }
    },
  };
</script>
<style lang="less" scoped>
  .ant-advanced-search-form {
    padding: 0 24px;
  }

  .ant-advanced-search-form .ant-form-item {
    display: flex;
  }

  .ant-advanced-search-form .ant-form-item-control-wrapper {
    flex: 1;
  }

  #components-form-demo-advanced-search .ant-form {
    max-width: none;
  }

  /deep/ .ant-form-explain {
    display: none !important;
  }

  .avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
  }

  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>


